<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件</title>
    <script src="../libs/vue.js"></script>
    <style>
        .box{
            width:200px;
            height: 200px;
            background: darkcyan;
            color: #dfdfdf;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>  {{title }} </h2>
        <h2>msg == {{msg }}</h2>
        <m-head></m-head>
        <parent></parent>
        
    </div>

    <template id="parent">
        <div>
            <h2>parent - parent - 父组件 </h2>
            <h2>count--- {{count }}</h2>
            <h2>msg=== {{msg}}</h2>
            <p class="box" v-show="show">
                    我是被子组件one控制的 
            </p>
            <hr>
            <child
                @changepcount="getNewCount"
                :msg="msg"
                @changemsg="getNewMsg"
                :show="show"
                :changeshow="changeshow"
            ></child>
            <!-- @事件名="函数" -->
        </div>
    </template>

    <template id="child">
        <div>
            <h2>child - child - 子组件 1 </h2>
            <button @click="changepcount">自定义事件修改父组件的 count </button>
            <p>
                <input type="text" :value="msg" @input="changeMsg" >
            </p>
            <p>
                <button @click="changeBy">$parent 去修改父实例 </button>
                <button @click="changeshow(!show)">反向props 去修改父组件 图形的 {{show?'显示':'隐藏'}} </button>
            </p>
        </div>
    </template>
    
    <script>
        // 全局注册
        Vue.component("mHead",{
            template:"<header>Head - Head - wh2116daydayup </header>"
        })

        Vue.component("parent",{
            template:"#parent",
            data(){
                return {
                    count:2000,
                    msg:"do you work hard?",
                    show:true 
                }
            },
            methods:{
                getNewCount(n){
                    this.count+=n;
                },
                getNewMsg(msg){
                    this.msg = msg 
                },
                changeshow(show){
                    this.show = show;
                }
            }
        })

        Vue.component("child",{
            template:"#child",
            props:['msg','show','changeshow'],
            methods:{
                changepcount(){
                    this.$emit("changepcount",100)
                },
                changeMsg(e){
                    this.$emit('changemsg',e.target.value)
                },
                changeBy(){
                    this.$parent.count++;
                    // this.$parent.msg += this.$parent.msg
                    this.$parent.getNewMsg('晚上好好学习')
                }
            }
        })


        const vm = new Vue({
            // el:"#app",
            components:{
            },
            data:{
                title:"Vue 组件通信 (子改父) ",
                msg:"小型、独立和通常可复用的组件构建大型应用"
            },
            mounted(){
                document.getElementsByTagName('title')[0].innerHTML = this.title 
            }
        }).$mount("#app")
    </script>

    
      <!-- 
        组件  小巧  独立  可复用  
        组件系统 
        组件组织关系  
        1. 父子组件关系
        <A> 
            <B></B>
            <C></C>
        </A>
        2. 兄弟组件关系  
        <B></B>
        <C></C>

        Emit  发送
        On    监听 
        Once  只触发一次  


        组件之间的通信  
        1. 父组件访问子组件      （父组件修改子组件）


        2. 子组件访问父组件
        a.  自定义事件   emit  子组件发送事件    on 父组件监听事件 修改内部变量   
        b.  $parent     父实例，如果当前实例有的话  父组件  
        c.  反向props   父组件 把修改自身变量的方法函数通过props 传递给子组件 子组件执行这个props函数  实现子改父 
        d.  事件中央总线   
        e.  vuex   
        
        3.  兄弟组件之间的通信  


        refs   this.$refs  
        1. 绑定到标签  指的当前的真实DOM 
        2. 绑定到组件  指的是当前的组件对象  直接修改组件内的变量  直接调用组件内部的函数 
     -->
</body>
</html>